<template>
	<page-loading :show="showPage" height="100%">
		<view class="self-wash-index" v-if="startRes">
			<view class="status-bar" :style="{ height: `${statusBarHeight}px` }"></view>
			<view class="back" :style="{ top: `${statusBarHeight}px` }" @click="onBack">
				<u-icon name="nav-back" size="44" color="#fff"></u-icon>
			</view>
			<view class="header">
				<view class="title">
					<text>{{ machineState }}</text>
				</view>
				<view class="tips"><text>提醒：冲水、泡沫或吸尘才计时</text></view>
			</view>
			<!-- {{timeRemaining}} {{surplusTime}} -->
			<view class="section">
				<view class="content">
					<image class="logo" src="https://files.yzsheng.com/client/selfwash/7mai_logo.png"></image>
					<view class="screen" :style="{'height': startRes.card.card_Type === 4 && thisFee < initialDeductionCost?'400rpx':'360rpx'}">
						<view class="date" v-if="currentTime">
							<text>{{ currentTime.date }}</text>
							<text>{{ currentTime.time }}</text>
							<text>星期{{ currentTime.week }}</text>
						</view>
						<view class="date" v-else style="height: 38rpx;"></view>
						<view class="info">
							<view class="text">
								<text>站点信息：</text>
								<text
									class="value">{{ startRes.station.station_Name }}-{{ startRes.machine.wash_Machine_Id }}</text>
							</view>
						</view>
						<view class="info">
							<view class="text">
								<text>会员信息：</text>
								<text class="value">{{ startRes.card.formatText }}</text>
							</view>
							<view class="text" v-if="startRes.card.card_Type !== 4 && startRes.card.card_Type !== 3">
								<text>剩余</text>
								<text class="value">{{ startRes.card.surplus }}</text>
							</view>
							<!-- card_Type===4（计时卡） -->
						</view>
						<!-- 计费卡起步价 -->
						<view class="info" v-if="startRes.card.card_Type === 4 && thisFee < initialDeductionCost">
							<view class="text">
								<text>本次前{{ initialDeductionCost }}元：</text>
								<text class="value">{{ thisFee }}元/</text>
								<text>{{ initialDeductionCost }}元</text>
							</view>
						</view>

						<view class="time">
							<view class="item first">
								<view class="timing">
									<text>{{ thisTimeArr.join(':') }}</text>
								</view>
								<view class="text"><text>本次用时</text></view>
							</view>
							<view class="item">
								<!-- 计费卡剩余 -->

								<view class="surplus" v-if="startRes.card.card_Type === 4">
									<text
										class="bold">{{ initialDeductionCost>thisFee ? initialDeductionCost : thisFee}}元/</text>
									<!-- true false -->
									<text>{{startRes.card.card_Left_Cost}}元</text>
								</view>
								<view class="surplus" v-if="startRes.card.card_Type !== 4">
									<text>
										<!-- 当前使用时间 -->
										<text class="bold">{{ timeRemaining >= 0 ? timeRemaining : 0 }}m/</text>
										{{ surplusTime }}m
									</text>
								</view>
								<view class="text">
									<text v-if="startRes.card.card_Type === 1">今天剩余</text>
									<text v-else-if="startRes.card.card_Type === 2">本次剩余</text>
									<text v-else>剩余</text>
								</view>
							</view>
						</view>
						<view class="machine-status">
							<view class="item">
								<view class="progress">
									<view class="current water"
										:style="{ width: mState.qsshuiwei === '1' ? '100%' : '10%' }"></view>
								</view>
								<view class="text">
									<text>{{ mState.qsshuiwei === '1' ? '清水充足' : '清水不足' }}</text>
								</view>
							</view>
							<view class="item">
								<view class="progress">
									<view class="current foam"
										:style="{ width: mState.pmshuiwei === '1' ? '100%' : '10%' }"></view>
								</view>
								<view class="text">
									<text>{{ mState.pmshuiwei === '1' ? '泡沫充足' : '泡沫不足' }}</text>
								</view>
							</view>
							<view class="item">
								<view class="progress">
									<view class="current cleaner" style="width: 100%;"></view>
								</view>
								<view class="text"><text>吸尘器正常</text></view>
							</view>
						</view>
					</view>
					<view class="menu-box">
						<view class="menu-list">
							<menu-button :item="item" v-for="(item, index) in menu" :key="index" :index="index"
								@click="onClickMenu"></menu-button>
						</view>
					</view>
					<view class="suspend-time">
						<text>
							暂停计时
							<text class="bold">{{ pauseTimeArr.join(':') }}</text>
						</text>
					</view>
				</view>
				<view class="mask" v-if="startRes && !startRes.card.isAvailable"></view>
			</view>
			<view class="end-box">
				<view class="btn" @click="onEndOrder"><text>结束洗车</text></view>
			</view>
			<!-- <view style="color: #FFFFFF;margin-top: 24rpx;" @click="onEndOrder">已在机器完成洗车</view> -->
			<view class="footer">
				<view class="tips"><text>提醒：洗车结束，请务必点击结束洗车!</text></view>
			</view>
			<u-modal v-model="show" content="您的本次洗车服务已在设备端结束，谢谢惠顾！" @confirm="confirm"></u-modal>
		</view>
	</page-loading>
</template>

<script>
	const dayjs = require('@/utils/dayjs.js')
	import menuButton from './components/menuButton.vue'
	let currentTimer = null,
		thisTimer = null,
		pauseTimer = null,
		setMenuStateTimer = null,
		stateTimer = null,
		checkTimer = null,
		checkTimerTwo = null
	export default {
		components: {
			menuButton
		},
		data() {
			return {
				maxPauseTime:1200, // 最多暂用时长
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				menu: [{
						title: '清水',
						icon: 'icon_1',
						time: true,
						status: false,
						value: 'qs'
					},
					{
						title: '泡沫',
						icon: 'icon_2',
						time: true,
						status: false,
						value: 'pm'
					},
					{
						title: '洗手',
						icon: 'icon_3',
						time: true,
						status: false,
						value: 'xs'
					},
					// {
					//   title: '吹风',
					//   icon: 'icon_4',
					//   time: true,
					//   status: false,
					//   value: 'cq'
					// },
					{
						title: '吸尘',
						icon: 'icon_5',
						time: true,
						status: false,
						value: 'xc'
					}
					// {
					//   title: '音乐',
					//   icon: 'icon_6',
					//   time: false,
					//   status: false,
					//   value: null
					// }
				],
				thisTime: 0, //本次用时
				thisTimeArr: ['00', '00', '00'], // 本次用时
				pauseTime: 0,
				pauseTimeArr: ['00', '00', '00'], // 暂停时间
				currentTime: null, // 当前时间
				cardId: '', // 会员卡id
				machineId: '', // 机器id
				myUsingCar: '',
				startRes: null, // 启动结果
				showPage: false,
				machineState: '',
				isStart: false,
				mState: {
					pmshuiwei: '1',
					qsshuiwei: '1'
				}, // 机器状态
				secondsPerYuan: 0, //一块钱抵扣多少秒			1块48秒	1分钟抵扣	1.25块
				initialDeductionCost: 0, //起步价格
				limit: 0,
				show: false,
				killtime:null,
				autoasktime:null,
				shengyushijian:0,
				shengyuzanting:0,
			}
		},
		computed: {
			// 本次剩余时间
			timeRemaining() {
				let num = 30
				if ((this.startRes && this.startRes.card.card_Type === 1) || this.startRes.card.card_Type === 2) {
					//包月
					num = Math.floor(this.startRes.card.left_Seconds / 60)
				} else if (this.startRes && this.startRes.card.card_Type === 3) {
					//计时
					num = this.startRes.card.left_Seconds
				}
				if (this.thisTime > 0) {
					//本次用时开始
					num--
				}
				return num - Number(this.thisTimeArr[1])
			},
			//30 - 分钟数
			// 卡剩余时间
			surplusTime() {
				let num = 30
				if (this.startRes) {
					if (this.startRes.card.card_Type === 2) {
						//次卡
						num = Math.floor(this.startRes.card.left_Seconds / 60) || 20
					} else if (this.startRes.card.card_Type === 3) {
						num = this.startRes.card.left_Seconds || 0
					}else if(this.startRes.card.card_Type === 1){
						num = Math.floor(this.startRes.card.left_Seconds/60) || 30
					}
				}
				return num
			},
			// 本次费用
			thisFee() {
				if (this.thisTime > 0) {
					return Math.round((this.secondsPerYuan + Number(this.thisTimeArr[1] * this.secondsPerYuan)) * 100) /
						100
				} else {
					return Number(this.thisTimeArr[1])
				}
			}
		},
		onLoad(options) {
			this.getTimeJson()
			this.cardId = options.cardId || ''
			this.machineId = options.machineId || ''
			this.getCurrentTime()
			currentTimer = setInterval(() => {
				this.getCurrentTime()
			}, 1000)
			this.getMyInProgressOrder()
		},
		methods: {
			async GetOrderInfoByOrderId(call){
				try{
					let data = {
						"wash_Machine_Id": this.machineId
					}
					const res = await this.$api.selfServiceCarWash.CheckMachineAndOrder(data)
					/* checkTimer = setTimeout(()=>{
						this.GetOrderInfoByOrderId(res =>{
							if(!res.data.isAvailable){//如果洗车机不可用
								uni.showModal({
									title: '温馨提示',
									content: '您的洗车时间过长，如果您碰到了问题，请你拨打'+this.$store.state.serviceNumber.showNumber,
									confirmText: '是',
									cancelText: '否',
									confirmColor: '#FBB000',
									success: res => {
										if (res.confirm) {
											uni.showLoading({
												title: '正在结束'
											})
											this.closeEnd(machine => {
												uni.redirectTo({
													url: `/pages_commodity/selfWash/end?id=${machine.wash_Machine_Id}&time=${self.thisTime}&card=${encodeURIComponent(self.startRes.card.surplus1)}&orderId=${
								          machine.id
								        }`
												})
											})
										}else if (res.cancel) {
											clearInterval(checkTimer)
											
										}
									}
								})
							}
						})
					},30000) */
					call(res)
				}catch(e){
					clearInterval(currentTimer)
					clearInterval(thisTimer)
					clearInterval(pauseTimer)
					clearInterval(setMenuStateTimer)
					clearTimeout(stateTimer)
					/* if(!this.show){
						this.GetOrderInfoByOrderId(res =>{
							if(res.data.isAvailable){
								this.show = true
							}
							
						})
					} */
				}
			},
			onFinsh() {
				this.getMyInOrder()
			},
			confirm(){
				this.isShow = false
				clearInterval(currentTimer)
				clearInterval(thisTimer)
				clearInterval(pauseTimer)
				clearInterval(setMenuStateTimer)
				clearTimeout(stateTimer)
				this.onBack()
			},
			onClickMenu(data) {
				let flag = this.menu.some(item => {
					return item.status
				})
				// this.setMenuState(data, flag)
				// return false
				if (flag) {
					uni.showLoading({
						title: '加载中'
					})
					this.$api.selfServiceCarWash
						.SetSailZhiling({
							op: 'zhiling',
							id: this.machineId,
							zhilingstr: 'zt'
						})
						.then(res => {
							clearTimeout(setMenuStateTimer)
							setMenuStateTimer = setTimeout(() => {
								this.setMenuState(data, flag)
							}, 1000)
							uni.hideLoading()
						})
						.catch(() => {
							uni.hideLoading()
						})
				} else {
					if (this.menu[data].value) {
						uni.showLoading({
							title: '加载中'
						})
						this.$api.selfServiceCarWash
							.SetSailZhiling({
								op: 'zhiling',
								id: this.machineId,
								zhilingstr: this.menu[data].value
							})
							.then(res => {
								clearTimeout(setMenuStateTimer)
								setMenuStateTimer = setTimeout(() => {
									this.setMenuState(data, flag)
								}, 1000)
								uni.hideLoading()
							})
							.catch(() => {
								uni.hideLoading()
							})
					} else {
						clearTimeout(setMenuStateTimer)
						setMenuStateTimer = setTimeout(() => {
							this.setMenuState(data, flag)
						}, 1000)
					}
				}
			},
			setMenuState(data, flag) {
				// debugger
				clearInterval(pauseTimer)
				clearInterval(thisTimer)
				this.menu.map((item, index) => {
					item.status = data === index && !item.status && !flag
				})
				this.menu = this.menu
				// debugger
				if (!flag && this.menu[data].time) {
					this.startTime()
					this.machineState = '洗车中'
				} else {
					this.pauseTimeFuc()
					this.machineState = '机器已暂停'
				}
			},
			onBack() {
				let pages = getCurrentPages()
				if (pages.length <= 1) {
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages_commodity/selfWash/selfWash'
						})
					}, 1000)
					
					return true
				}else{
					uni.navigateBack({
						delta:1
					})
				}
				return true
			},
			// 获取当前时间
			getCurrentTime() {
				let week = ['一', '二', '三', '四', '五', '六', '日']
				this.currentTime = {
					date: dayjs().format('YYYY-MM-DD'),
					time: dayjs().format('HH:mm:ss'),
					week: week[dayjs().day() - 1]
				}
			},
			// 开始本次计时
			startTime() {
				let self = this
				thisTimer = setInterval(() => {
					this.thisTime++
					this.thisTimeArr = this.$commen.countDown(this.thisTime)
					// console.log(this.thisTimeArr)
					if (this.startRes.card.card_Type === 1) {
						// 月卡会员(使用时间>=卡剩余时间||)
						if (Number(this.thisTimeArr[1]) >= this.surplusTime || Number(this.timeRemaining) < 0) {
							this.closeEnd(machine => {
								uni.showModal({
									title: '温馨提示',
									content: '抱歉！今日洗车时长已用完。',
									confirmText: '朕！知道了',
									showCancel: false,
									confirmColor: '#FBB000',
									success: res => {
										if (res.confirm) {
											// this.thisTime = 0
											// this.thisTimeArr = ['00', '00', '00']
											// this.pauseTime = 0
											// this.pauseTimeArr = ['00', '00', '00']
											uni.redirectTo({
												url: `/pages_commodity/selfWash/end?id=${machine.wash_Machine_Id}&time=${self.thisTime}&card=${encodeURIComponent(self.startRes.card.surplus1)}&orderId=${
                        machine.id
                      }`
											})
										}
									}
								})
							})
						}
					} else if (this.startRes.card.card_Type === 2) {
						// 次会员
						if (Number(this.thisTimeArr[1]) >= this.surplusTime || Number(this.timeRemaining) < 0) {
							this.closeEnd(machine => {
								let surplus = this.startRes.card.left_Times - 1
								if (surplus >= 1) {
									uni.showModal({
										title: '温馨提示',
										content: `本次洗车时长已用完，您的次卡还剩余${surplus}次可用，是否继续使用？`,
										confirmText: '继续使用',
										cancelText: '不用了',
										confirmColor: '#FBB000',
										success: res => {
											if (res.confirm) {
												uni.redirectTo({
													url: `/pages_commodity/selfWash/end?id=${machine.wash_Machine_Id}&time=${self.thisTime}&card=${encodeURIComponent(self.startRes.card.surplus1)}&orderId=${
                          machine.id
                        }`
												})
											}
										}
									})
								} else {
									uni.showModal({
										title: '温馨提示',
										content: `本次洗车时长已用完，您的次卡还剩余0次可用，是否去购买？`,
										confirmText: '去购买',
										cancelText: '不用了',
										confirmColor: '#FBB000',
										success: res => {
											if (res.confirm) {
												uni.redirectTo({
													url: `/pages_commodity/selfWash/buyMember?machineId=${machine.id}`
												})
											}
										}
									})
								}
							})
						}
					} else if (this.startRes.card.card_Type === 3) {
						// 计时
						if (Number(this.thisTimeArr[1]) >= this.surplusTime || Number(this.timeRemaining) < 0) {
							this.closeEnd(machine => {
								uni.showModal({
									title: '温馨提示',
									content: '抱歉！您的洗车时长已用完。是否去购买？',
									confirmText: '去购买',
									cancelText: '不用了',
									confirmColor: '#FBB000',
									success: res => {
										if (res.confirm) {
											uni.redirectTo({
												url: `/pages_commodity/selfWash/buyMember?machineId=${machine.id}`
											})
										}
									}
								})
							})
						}
					} else if (this.startRes.card.card_Type === 4) {
						// 计费
						// console.log(this.thisFee)
						if (this.thisFee >= this.startRes.card.card_Left_Cost) {
							this.closeEnd(machine => {
								uni.showModal({
									title: '温馨提示',
									content: '抱歉！您的洗车余额已用完。是否去购买？',
									confirmText: '去购买',
									cancelText: '不用了',
									confirmColor: '#FBB000',
									success: res => {
										if (res.confirm) {
											uni.redirectTo({
												url: `/pages_commodity/selfWash/buyMember?machineId=${machine.id}`
											})
										}
									}
								})
							})
						}
					}
				}, 1000)
			},
			// 暂停计时
			pauseTimeFuc() {
				let self = this
				pauseTimer = setInterval(() => {
					this.pauseTime++
					this.pauseTimeArr = this.$commen.countDown(this.pauseTime)
					// 如果暂停时间大于最大暂时时间结束机器
					if (this.pauseTime >= this.maxPauseTime) {
						this.closeEnd(machine => {
							uni.showModal({
								title: '温馨提示',
								content: '抱歉！您占用机器用时已耗尽，系统已结束当前洗车！详询'+this.$store.state.serviceNumber.showNumber,
								confirmText: '朕！知道了',
								showCancel: false,
								confirmColor: '#FBB000',
								success: res => {
									if (res.confirm) {
										uni.redirectTo({
											url: `/pages_commodity/selfWash/end?id=${machine.wash_Machine_Id}&time=${self.thisTime}&card=${encodeURIComponent(self.startRes.card.surplus1)}&orderId=${
                      machine.id
                    }`
										})
									}
								}
							})
						})
					}
				}, 1000)
			},
			async getTimeJson(){
				try{
					const res = await this.$api.jsonData.getTimeJson()
					// console.log(res)
					//超时结束时间
					this.killtime = parseInt(res.data.killtime/res.data.asktime)
					//轮询查询订单状态时间
					this.autoasktime =res.data.asktime*1000
					// console.log(this.killtime)
				}catch(e){
					//TODO handle the exception
				}
			} ,
			// 获取机器状态
			async getMachineState() {
				try {
					let res = await this.$api.selfServiceCarWash.SetSailGetState({
						op: 'getstate',
						id: this.machineId
					})
					if (res.code === 200) {
						if (res.data.mcstate === 0 || this.machineState === '机器启动失败') {
							this.machineState = '机器启动失败'
							return false
						} else {
							clearTimeout(stateTimer)
							stateTimer = setTimeout(() => {
								this.getMachineState()
							}, this.autoasktime)
						}
						this.limit++

						// console.log(this.limit)
						if(this.limit===this.killtime){
							let that = this
							this.GetOrderInfoByOrderId(res =>{
								if(!res.data.isAvailable){//如果洗车机不可用
									uni.showModal({
										title: '温馨提示',
										content: '您的洗车时间过长，如果您碰到了问题，请你拨打400-820-5656',
										confirmText: '是的，结束洗车',
										cancelText: '没有，继续洗车',
										confirmColor: '#FBB000',
										success: res => {
											if (res.confirm) {
												uni.showLoading({
													title: '正在结束'
												})
												// console.log('123')
												that.closeEnd(machine => {
													uni.redirectTo({
														url: `/pages_commodity/selfWash/end?id=${machine.wash_Machine_Id}&time=${that.thisTime}&card=${encodeURIComponent(that.startRes.card.surplus1)}&orderId=${
												    machine.id}&cardId=${that.cardId}`
													})
												})
											}else if (res.cancel) {
												// clearInterval(currentTimer)
												// clearInterval(thisTimer)
												// clearInterval(pauseTimer)
												// clearInterval(setMenuStateTimer)
												// clearTimeout(stateTimer)
												// this.limit = 0
											}
										}
									})
								}
							})
							return
						}else{
							if(!this.show){
								this.GetOrderInfoByOrderId(res =>{
									if(res.data.isAvailable){
										clearInterval(currentTimer)
										clearInterval(thisTimer)
										clearInterval(pauseTimer)
										clearInterval(setMenuStateTimer)
										clearTimeout(stateTimer)
										this.show = true
										this.$store.commit('setMachineId',this.machineId)
									}
									
								})
							}
							
								
						}

						/* if(this.limit===0){
							this.shengyushijian = res.data.shengyushijian
							this.shengyuzanting = res.data.shengyuzanting
						} */
						if (this.mState.worktype === res.data.worktype) {
							this.mState = res.data
							return
						}
						this.mState = res.data

						if (res.data.worktype === '0') return
						// 暂停
						if (res.data.worktype === '1') {
							this.machineState = '机器已暂停'
							clearInterval(thisTimer)
							clearInterval(pauseTimer)
							this.pauseTimeFuc()
							this.menu.map(item => {
								item.status = false
							})
							return
						}
						let index = null
						this.machineState = '洗车中'
						clearInterval(thisTimer)
						clearInterval(pauseTimer)
						this.startTime()
						this.menu.map(item => {
							item.status = false
						})
						if (res.data.worktype === '2') {
							index = 0
						} else if (res.data.worktype === '3') {
							index = 1
						} else if (res.data.worktype === '4') {
							index = 3
						} else if (res.data.worktype === '5') {
							index = 2
						}
						this.menu[index].status = true
					}
				} catch (e) {
					clearInterval(currentTimer)
					clearInterval(thisTimer)
					clearInterval(pauseTimer)
					clearInterval(setMenuStateTimer)
					clearTimeout(stateTimer)
				}
			},
			async getMyInProgressOrder() {
				// this.mState
				setTimeout(() => {
					this.showPage = true
				}, 1000)
				this.startRes = {
					card: {},
					machine: {},
					station: {}
				}
				if (this.mState.mcstate === 0) return false
				try {
					let res = await this.$api.selfServiceCarWash.GetMyInProgressOrder()
					// console.log(res,'123123')
					if (res.code === 200 && !res.data.cardInfo) {
						/* this.thisTime = res.data.total_Time<0?0:res.data.total_Time
						this.pauseTime = res.data.total_Pause_Time<0?0:res.data.total_Pause_Time */
						this.startSelfServiceCarWashOrder() //开始使用自助洗车会员卡
					} else if (res.code === 200 && res.data.cardInfo) {
						this.secondsPerYuan = Math.round((60 / res.data.seconds_Per_Yuan) * 100) / 100
						this.initialDeductionCost = res.data.initial_Deduction_Cost //起步价格
						this.thisTime = res.data.total_Time<0?0:res.data.total_Time
						this.pauseTime = res.data.total_Pause_Time<0?0:res.data.total_Pause_Time
						// console.log(this.thisTime,this.pauseTime,res.data.total_Pause_Time)
						let {
							self_Service_Car_Wash_Card_Order_Id,
							wash_Machine_Id
						} = res.data.selfServiceCarWashOrder
						let state = this.cardId === self_Service_Car_Wash_Card_Order_Id && this.machineId ===
							wash_Machine_Id
						// 获取会员卡可用时长
						let order = await this.getCardAvailableTimeById() //根据ID获取会员卡可用时间
						if (order.code === 200) {
							// console.log(2)
							this.startSelfServiceCarWashOrder(state, order.data)
						} else {
							// console.log(3)
							this.startSelfServiceCarWashOrder()
						}
					} else {
						// console.log(4)
						this.startSelfServiceCarWashOrder()
					}
				} catch (e) {
					console.log(e)
					// this.startSelfServiceCarWashOrder()
				}
			},
			async getMyInProgress(call) {
				try {
					let res = await this.$api.selfServiceCarWash.GetMyInProgressOrder()
					console.log(res, '123')
					call(res)
				} catch (e) {

				}
			},
			// 根据ID获取会员卡可用时间
			getCardAvailableTimeById() {
				return new Promise(async (resolve, reject) => {
					try {
						let res = await this.$api.selfServiceCarWash.GetCardAvailableTimeById({
							orderId: this.cardId
						})
						this.maxPauseTime = res.data.times_Pause_Seconds
						resolve(res)
					} catch (e) {}
				})
			},
			// 开始使用自助洗车会员卡
			async startSelfServiceCarWashOrder(state, order) {
				let self = this
				try {
					uni.showLoading({
						title: '机器启动中'
					})
					this.machineState = '机器启动中'
					let res = await this.$api.selfServiceCarWash.StartSelfServiceCarWashOrder({
						orderId: this.cardId,
						wash_Machine_Id: this.machineId
					})
					if (res.code === 200) {
						stateTimer = setTimeout(() => {
							this.getMachineState()
						}, 3000)
						if (!res.data.cardAvailableTimeResponse.isAvailable) {//有订单情况
							if (state && order) {
								this.isStart = true
								this.machineState = '机器已启动'
								res.data.cardAvailableTimeResponse.card_Left_Cost = order.card_Left_Cost
								res.data.cardAvailableTimeResponse.card_Type = order.card_Type
								res.data.cardAvailableTimeResponse.left_Times = order.left_Times
								res.data.cardAvailableTimeResponse.left_Minutes = order.left_Minutes
								res.data.cardAvailableTimeResponse.left_Seconds = order.left_Seconds
								res.data.cardAvailableTimeResponse.deadline = order.deadline
								this.initialDeductionCost = order.initial_Deduction_Cost //起步价格
								res.data.cardAvailableTimeResponse.isAvailable = true
							} else {
								this.machineState = '机器启动失败'
								let info = await this.getCardAvailableTimeById() //根据ID获取会员卡可用时间
								res.data.cardAvailableTimeResponse.card_Left_Cost = info.data
									.card_Left_Cost
								res.data.cardAvailableTimeResponse.card_Type = info.data.card_Type
								res.data.cardAvailableTimeResponse.left_Times = info.data.left_Times
								res.data.cardAvailableTimeResponse.left_Minutes = info.data.left_Minutes
								res.data.cardAvailableTimeResponse.left_Seconds = info.data.left_Seconds
								res.data.cardAvailableTimeResponse.deadline = info.data.deadline
								this.initialDeductionCost = info.data.initial_Deduction_Cost //起步价格
								this.secondsPerYuan = Math.round((60 / info.data.seconds_Per_Yuan) * 100) / 100
								uni.showToast({
									icon: 'none',
									title: res.data.cardAvailableTimeResponse.returnMessage,
									duration: 2000
								})
							}
						} else {//没有订单情况
							
							this.isStart = true
							this.machineState = '机器已启动'
							// this.getMyInProgress(async data => {
								let info = await this.getCardAvailableTimeById() //根据ID获取会员卡可用时间
								res.data.cardAvailableTimeResponse.card_Left_Cost = info.data
									.card_Left_Cost
								res.data.cardAvailableTimeResponse.card_Type = info.data.card_Type
								res.data.cardAvailableTimeResponse.left_Times = info.data.left_Times
								res.data.cardAvailableTimeResponse.left_Minutes = info.data.left_Minutes
								res.data.cardAvailableTimeResponse.left_Seconds = info.data.left_Seconds
								res.data.cardAvailableTimeResponse.deadline = info.data.deadline
								this.initialDeductionCost = info.data.initial_Deduction_Cost //起步价格
								this.secondsPerYuan = Math.round((60 / info.data.seconds_Per_Yuan) * 100) / 100
								res.data.cardAvailableTimeResponse.isAvailable = true
							// })
						}

						let card = res.data.cardAvailableTimeResponse
						card.day = dayjs(card.deadline).diff(dayjs(), 'day') + 1
						if (card.card_Type === 1) {
							card.formatText = '月卡会员'
							card.surplus = `${card.day}天`
							card.surplus1 = `${card.day}-天`
						} else if (card.card_Type === 2) {
							card.formatText = '次卡会员'
							card.surplus = `${card.left_Times}次`
							card.surplus1 = `${card.left_Times}-次`
						} else if (card.card_Type === 3) {
							card.formatText = '计时会员'
							card.left_Seconds = Math.floor(card.left_Seconds / 60)
							card.surplus = `${card.left_Seconds}分`
							card.surplus1 = `${card.left_Seconds}-分`
						} else if (card.card_Type === 4) {
							card.formatText = '充值会员'
							card.surplus = `${card.card_Left_Cost}元`
							card.surplus1 = `${card.card_Left_Cost}-元`
						}
						this.startRes = {
							card: card,
							machine: res.data.selfServiceCarWashMachineInfoResponse
								.selfServiceCarWashMachineResponse,
							station: res.data.selfServiceCarWashMachineInfoResponse
								.selfServiceCarWashStationResponse
						}

						this.showPage = true

						if (card.isAvailable) {
							self.pauseTimeFuc()
						}
					}
					uni.hideLoading()
					// console.log(res)
				} catch (e) {
					//TODO handle the exception
					uni.hideLoading()
				}
			},
			// 结束订单
			onEndOrder() {
				let self = this
				uni.showModal({
					title: '温馨提示',
					content: '是否确定结束洗车？',
					confirmText: '是',
					cancelText: '否',
					confirmColor: '#FBB000',
					success: res => {
						if (res.confirm) {
							uni.showLoading({
								title: '正在结束'
							})
							this.closeEnd(machine => {
								uni.redirectTo({
									url: `/pages_commodity/selfWash/end?id=${machine.wash_Machine_Id}&time=${self.thisTime}&card=${encodeURIComponent(self.startRes.card.surplus1)}&orderId=${
                  machine.id}&cardId=${this.cardId}`
								})
							})
						}
					}
				})
			},
			// 结束订单
			async closeEnd(callback) {
				try {
					let order = await this.$api.selfServiceCarWash.GetMyInProgressOrder()
					if (order.code === 200 && order.data) {
						let machine = order.data.selfServiceCarWashOrder
						let res = await this.$api.selfServiceCarWash.SetSailJiesuan({
							wash_Machine_Id: machine.wash_Machine_Id
						})
						uni.hideLoading()
						if (res.code === 200 && res.data.result === 'success') {
							clearInterval(pauseTimer)
							clearInterval(thisTimer)
							this.isStart = false
							this.$store.commit('setMachineId',this.machineId)
							callback(machine)
						} else {
							if (res.code === 200 && res.data.result !== 'suceess') {
								uni.showToast({
									icon: 'none',
									title: res.msg
								})
							}
						}
					} else if (order.code === -4) {
						uni.hideLoading()
						this.onBack()
					} else {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: order.msg
						})
					}
				} catch (e) {
					//TODO handle the exception
					uni.hideLoading()
					uni.showToast({
						icon: 'none',
						title: e.msg
					})
				}
			}
		},
		/* onBackPress() {
			let self = this
			if (this.isStart) {
				uni.showModal({
					title: '温馨提示',
					content: '当前已有启动机器，是否结束？',
					confirmText: '是',
					cancelText: '否',
					confirmColor: '#FBB000',
					success: res => {
						if (res.confirm) {
							uni.showLoading({
								title: '正在结束'
							})
							this.closeEnd(machine => {
								uni.redirectTo({
									url: `/pages_commodity/selfWash/end?id=${machine.wash_Machine_Id}&time=${self.thisTime}&card=${encodeURIComponent(self.startRes.card.surplus1)}&orderId=${
                  machine.id
                }`
								})
							})
						}
					}
				})
				return true
			} else {
				let pages = getCurrentPages()
				if (pages.length <= 1) {
					uni.reLaunch({
						url: '/pages/index/index'
					})
					return true
				}
			}
		}, */
		onUnload() {
			clearInterval(currentTimer)
			clearInterval(thisTimer)
			clearInterval(pauseTimer)
			clearInterval(setMenuStateTimer)
			clearTimeout(stateTimer)
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		// background: linear-gradient(0deg, #3b3b3b, #656565);
	}

	.self-wash-index {
		background: linear-gradient(0deg, #3b3b3b, #656565);
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.back {
			position: fixed;
			left: 0;
			width: 44px;
			height: 44px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.header {
			text-align: center;

			.title {
				height: 44px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 46rpx;
				color: #fff;
				font-weight: bold;
			}

			.tips {
				color: #fff;
				font-size: 20rpx;
			}
		}

		.section {
			flex: 1;
			margin: 15rpx 0;
			position: relative;

			.mask {
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				z-index: 2;
			}
		}

		.end-box {
			width: 602rpx;
			height: 88rpx;
			overflow: hidden;
			border-radius: 10rpx;

			.btn {
				height: 88rpx;
				border: 6rpx solid #c6c6c6;
				border-image: linear-gradient(-90deg, #959595, #d4d4d4, #959595, #d4d4d4, #959595, #d4d4d4, #d4d4d4, #959595) 1 1;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				color: #fff;
			}
		}

		.footer {
			text-align: center;
			// padding: 24rpx 0;

			.tips {
				font-size: 24rpx;
				color: #999;
			}
		}

		.content {
			height: 100%;
			width: 660rpx;
			margin: 0 auto;
			background-image: url('https://files.yzsheng.com/client/selfwash/beijingkuang.png');
			background-size: 100% 100%;
			padding: 0 50rpx;
			overflow: hidden;
			display: flex;
			flex-direction: column;

			.logo {
				margin-top: 44rpx;
				width: 346rpx;
				height: 50rpx;
				margin-left: 6rpx;
			}

			.screen {
				// 534 26
				width: 550rpx;
				height: 400rpx;
				margin: 12rpx auto 0;
				background-image: url('https://files.yzsheng.com/client/selfwash/xianshiqi.png');
				background-size: 100% 100%;
				padding-left: 35rpx;
				margin-left: 7rpx;

				.date {
					margin-top: 26rpx;
					font-size: 20rpx;
					line-height: 38rpx;
					color: #999;

					text {
						margin-right: 30rpx;
					}
				}

				.info {
					display: flex;
					align-items: center;
					height: 38rpx;
					justify-content: space-between;

					.text {
						margin-right: 20rpx;
						// flex: 1;
						font-size: 20rpx;
						color: #999;

						.value {
							color: #333;
						}
					}
				}

				.time {
					display: flex;
					align-items: center;
					margin-top: 20rpx;

					.item {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						flex: 1;

						.timing {
							width: 230rpx;
							height: 56rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 42rpx;
							color: #fff;
							font-weight: bold;
							background-image: url('https://files.yzsheng.com/client/selfwash/shuzibeijing.png');
							background-size: 100% 100%;
						}

						.surplus {
							height: 56rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 28rpx;
							color: #999;
							font-weight: bold;

							.bold {
								font-size: 42rpx;
								color: #333;
							}
						}

						.text {
							font-size: 20rpx;
							color: #999;
							margin-top: 8rpx;
						}
					}
				}

				.machine-status {
					display: flex;
					margin-top: 16rpx;

					.item {
						width: 132rpx;
						margin-right: 30rpx;
						text-align: center;

						.progress {
							height: 18rpx;
							background-color: #f0f0f0;
							box-shadow: 0 2rpx 4rpx 0 rgba(8, 15, 34, 0.3) inset;
							border-radius: 9rpx;
							overflow: hidden;

							.current {
								height: 18rpx;
								border-radius: 9rpx;
							}

							.water {
								background-color: #75d5ed;
								box-shadow: 0 -1rpx 6rpx 0rpx rgba(12, 47, 56, 0.4) inset;
							}

							.foam {
								background-color: #4687e0;
								box-shadow: 0 -1rpx 6rpx 0rpx rgba(12, 33, 63, 0.4) inset;
							}

							.cleaner {
								background-color: #ffba00;
								box-shadow: 0 -1rpx 6rpx 0rpx rgba(73, 55, 7, 0.4) inset;
							}
						}

						.text {
							font-size: 20rpx;
							color: #666;
							margin-top: 10rpx;
						}
					}
				}
			}

			.menu-box {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;

				.menu-list {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					width: 400rpx;
				}
			}

			.suspend-time {
				text-align: center;
				font-size: 26rpx;
				color: #3d3d3d;
				padding: 0 0 60rpx 0;

				.bold {
					font-weight: bold;
					margin-left: 10rpx;
				}
			}
		}
	}
</style>
